<!-- eslint-disable camelcase -->
<script setup>
import { useStore } from 'vuex'
import { ref, onMounted, provide, getCurrentInstance } from 'vue'
import router from '../router/router'
import storage from '../utils/storage'
import GroupRoom from '../components/GroupRoom.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useStore()
const username = ref(store.state.userStore.userInfo.username)
const avatarUrl = ref(store.state.userStore.userInfo.avatarUrl)
const touser = route.query.name
const touseravatarUrl = route.query.url
const { proxy } = getCurrentInstance()
const socket = ref(proxy.$webSocketService.socket)
const userinfo = ref({
  nameinfo: username
})
onMounted(() => {
  socket.value.send(JSON.stringify(userinfo.value))
})

const exit = () => {
  storage.clearAll()
  router.push('/')
}

const back = () => {
  router.push('/chatroom')
}

provide('touseravatarUrl', touseravatarUrl)
provide('groupName', touser)
</script>

<template>
  <el-container class="home_container">

    <el-header id="topbar">
      <el-row>
        <el-col :span="4" class="topbar-left">
          <span class="title" @click="index()">IM-SYSTEM</span>
        </el-col>
        <el-col :span="20" class="topbar-right">
          <i class="el-icon-menu" @click="toggle()"></i>
          <div class="user">
            <img :src="'src/' + avatarUrl" class="user-img" ref="img" @click="showSetting()" />
            <li class="right">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <div class="box"> <a href="javacript:;">{{ username }}</a></div>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <p @click="manage()">管理中心</p>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <p class="exit" @click="exit()">退出</p>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </li>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <el-aside width="200px" class="left">
        <div class="aside">
          <div class="back"><button @click="back">返回</button></div>
          <div class="img"><img :src="'src/' + touseravatarUrl" class="friend-img" ref="img" /></div>
          <div class="username">{{ touser }}</div>
        </div>
      </el-aside>
      <el-main>
        <GroupRoom></GroupRoom>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.box {
  padding-bottom: 10px;
  padding-top: 5px;
}

.box a {
  color: #000;
  ;
}

.index {
  margin-left: 70px;

}

.home_container {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%
}

.box {
  margin-top: 25px;

}

.box a {
  text-decoration: none;
  font-size: x-large;
  color: aquamarine;
}

.right .icon {
  margin-right: 6px;

}

#topbar {
  position: relative;
  z-index: 10;
  background-color: #124280;
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

.topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.topbar-left .icon-kaoshi {
  font-size: 60px;
}

.topbar-left .title {
  font-size: 20px;
  cursor: pointer;
}

.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}

.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}

.topbar-right .user .user-img {
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}

.user .out {
  font-size: 14px;
  position: absolute;
  top: 80px;
  right: 0px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 12px;
}

.user .out ul {
  list-style: none;
}

.user .out ul>li {
  height: 26px;
  line-height: 26px;
}

.left {
  background-color: #94b6e3;
  width: 210px;
}

.aside {
  border-bottom: solid 0.5px rgba(0, 0, 0, 0.066);
  height: 80px;
  text-align: center;

  display: flex;
}

.friend-img {
  flex: 1;
  width: 95px;
  height: 80px;
}

.username {
  flex: 1;
  text-align: left;
  padding-left: 25px;
  margin-top: 10px;
}
</style>
